<template>
  <div>
    <div class="face">  
      <img src="src/images/face.jpg"/>
      <p>路人甲乙丙</p>
    </div>
    <div class="body">
      <mt-navbar class="page-part">
        <mt-tab-item id="1">收藏</mt-tab-item>
        <mt-tab-item id="2">阅读</mt-tab-item>
        <mt-tab-item id="3">消息</mt-tab-item>
        <mt-tab-item id="3">金币</mt-tab-item>
      </mt-navbar>
      <div class="listBox">
        <mt-cell v-for="(cellList1,index) in cellList1" id="mycell">
          <i slot="icon" :class="cellList1.iconSrc" :style="cellList1.style"></i>
          <span slot="title">{{cellList1.title}}</span>
        </mt-cell>
      </div>
      <div class="listBox">
        <mt-cell id="mycell">
          <i slot="icon" class="iconfont icon-yejianmoshi" style="color:purple"></i>
          <span slot="title">夜间模式</span>
          <mt-switch @change="turn" v-model="value"></mt-switch>
        </mt-cell>
        <mt-cell v-for="(cellList2,index) in cellList2" id="mycell">
          <i slot="icon" :class="cellList2.iconSrc" :style="cellList2.style"></i>
          <span slot="title">{{cellList2.title}}</span>
        </mt-cell>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        cellList1:[
          {iconSrc:"iconfont icon-follow",title:"关注",style:"color:orange"},
          {iconSrc:"iconfont icon-jinbi",title:"金币任务",style:"color:yellow"},
          {iconSrc:"iconfont icon-2",title:"金币商城",style:"color:red"}
          ],
        cellList2:[
          {iconSrc:"iconfont icon-icon17",title:"离线阅读",style:"color:green"},
          {iconSrc:"iconfont icon-youxiang",title:"我的邮箱",style:"color:blue"},
          {iconSrc:"iconfont icon-yijianxiang",title:"意见反馈",style:"color:orange"}
        ],
        value:false,
      }
    },
    methods:{
      turn(){
        
      }
    }
  }
</script>
<style>
  .body{background-color:#eee}
  .face{text-align:center;background:#f40;padding:20px 0}
  .face img{width:60px;height:60px;border-radius:50%}
  .face p{font-size:12px;color:#fff;margin:0}
  .listBox{margin-top:10px;}
  #mycell{height:38px;}
  #mycell .mint-cell-wrapper{padding:0;height:38px;}
  .mint-cell-title{font-size:12px;color:#000}
  #mycell .iconfont{margin-right:5px;}
</style>
